<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>房源详情</el-breadcrumb-item>
    </el-breadcrumb>

    <div v-if="detail">
      <el-carousel v-if="detail.pictures" :interval="2500" type="card" height="360px">
        <el-carousel-item autoplay="true" v-for="item in detail.pictures.split(';')" :key="item">
          <a :href="item" target="_blank">
            <img class="house-pic" :src="item" title="点击查看原图" />
          </a>
        </el-carousel-item>
      </el-carousel>

      <div class="house-detail-container">
        <div class="title">{{detail.title}}</div>
        <div class="room-num">
          <span>{{detail.room_num}} 间卧室</span>
          <span>床型{{detail.bed_width}}x{{detail.bedLength}}米</span>
          <span>{{detail.bath_num}} 间卫生间</span>
        </div>
        <div class="labels" v-if="detail.labels">
          <span v-for="label in detail.labels.split(',')" :key="label">{{label}}</span>
        </div>
        <div>
          <h4>房间描述</h4>
          <div v-html="detail.desc"></div>
          <h4>设施</h4>
          <div class="facility-item">
            <div v-if="detail.has_wifi">
              <font-awesome-icon icon="wifi" />
              <div>无线网络</div>
            </div>
            <div v-if="detail.has_shower">
              <font-awesome-icon icon="shower" />
              <div>淋浴</div>
            </div>
            <div v-if="detail.has_shampoo">
              <font-awesome-icon icon="leaf" />
              <div>洗发水</div>
            </div>
            <div v-if="detail.has_lotion">
              <font-awesome-icon icon="leaf" />
              <div>沐浴露</div>
            </div>
            <div v-if="detail.has_blower">
              <font-awesome-icon icon="bullseye" />
              <div>吹风机</div>
            </div>
            <div v-if="detail.has_air_condition">
              <font-awesome-icon icon="snowflake" />
              <div>空调</div>
            </div>
            <div v-if="detail.has_lamp">
              <font-awesome-icon icon="lightbulb" />
              <div>落地灯</div>
            </div>
            <div v-if="detail.has_sofa">
              <font-awesome-icon icon="folder-open" />
              <div>沙发</div>
            </div>
            <div v-if="detail.has_desk">
              <font-awesome-icon icon="window-maximize" />
              <div>桌子</div>
            </div>
            <div v-if="detail.has_chair">
              <font-awesome-icon icon="cube" />
              <div>椅子</div>
            </div>
            <div v-if="detail.has_tea_table">
              <font-awesome-icon icon="circle" />
              <div>茶几</div>
            </div>
            <div v-if="detail.has_waste_bin">
              <font-awesome-icon icon="trash" />
              <div>垃圾桶</div>
            </div>
            <div v-if="detail.has_fire_extinguisher">
              <font-awesome-icon icon="fire-extinguisher" />
              <div>灭火器</div>
            </div>
          </div>
          <h4>地址</h4>
          <div>
            {{detail.lontitude}}
            <baidu-map
              class="bm-view"
              ak="6fb38a5468fc1c3f231ce470b415e56a"
              :center="{lng: detail.longtitude, lat:detail.latitude }"
              :zoom="14"
            ></baidu-map>
            <br />
            <div>
              <font-awesome-icon icon="subway" />
              &nbsp;{{detail.near_station}}
            </div>
            <div>预订确认后将会发送邮件或短信给您具体的位置信息。</div>
          </div>
          <h4>预订须知</h4>
          <div v-html="detail.rules"></div>
          <h4>预订日历</h4>
          <div>
            <el-date-picker
              v-model="interTimerPicker"
              :picker-options="pickerOptions"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
            <el-button type="primary">确认预订</el-button>
          </div>
          <h4>房东简介</h4>
          <div>
            <div>游走走</div>
            <div>联系电话：15817239985</div>
            <div>电子邮箱：1163558472@qq.com</div>
          </div>
        </div>
      </div>
    </div>
    <div v-else>
      <p>该房源不存在或已下架</p>
    </div>
  </div>
</template>
<script>
import BaiduMap from "vue-baidu-map/components/map/Map.vue";
export default {
  name: "HouseDetail",
  data() {
    return {
      interTimerPicker: "",
      detail: null,
      pickerOptions: {
        disabledDate: time => {
          return this.dealDisabledDate(time);
        }
      }
    };
  },
  created() {
    console.log("路由", this.$route.query.id);
    this.getHouseDetail(this.$route.query.id);
  },
  methods: {
    dealDisabledDate(time) {
      // TODO:需要禁用掉被订的日期
      // 一天的毫秒数 = 8.64e7  判断时在return处可进行加减
      let curDate = new Date().getTime();
      return time.getTime() < Date.now();
    },
    getHouseDetail(house_id) {
      const _this = this;
      this.$axios
        .get("/house/getHouseDetail", {
          params: {
            house_id: house_id
          }
        })
        .then(function(res) {
          console.log("详情", res);
          if (res.status == 200) {
            _this.detail = res.data;
          } else {
            _this.detail = null;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  },
  components: {
    BaiduMap
  }
};
</script>
<style scoped>
* {
  text-align: left;
}
.title {
  font-size: 20px;
  font-weight: 600;
}

.house-pic {
  width: 100%;
  height: 350px;
}
.labels {
  margin: 5px 0 10px 0;
}
.labels span {
  border: 1px solid darkcyan;
  border-radius: 5px;
  padding: 3px 5px;
  margin-right: 5px;
  font-size: 12px;
  color: darkcyan;
}

.house-detail-container {
  padding: 20px;
}

.room-num {
  font-size: 12px;
  margin: 8px 0;
}

h4 {
  width: 100%;
  clear: both;
}

.facility-item > div {
  float: left;
  width: 100px;
  text-align: center;
  font-size: 14px;
  height: 60px;
}

.facility-item > div div {
  text-align: center;
  font-size: 12px;
}

.bm-view {
  width: 50%;
  height: 300px;
}
</style>
